<template>
  <div class="tags">
    <ol class="current">
      <li @click="toggle(tag)" :class="{selected:selectedTags.indexOf(tag)>=0}"
          v-for="tag in tagList" :key="tag.id">
        {{ tag.name }}
      </li>
    </ol>
    <div class="new">
      <button @click="createTag">新增标签</button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import {Prop} from 'vue-property-decorator';

@Component({
  computed: {
    tagList() {
      return this.$store.state.tagList
    }
  },
  watch:{

  }
})

export default class Tags extends Vue {
  @Prop(Array) value!:Tag[];
  selectedTags: Tag[] = this.$store.state.selectedTags;
  toggle(tag: Tag) {
    const index = this.selectedTags.indexOf(tag);
    if (index >= 0) {
      this.selectedTags.splice(index, 1);
    } else {
      this.selectedTags.push(tag);
    }
    this.$emit('update:value', this.selectedTags);
  }

  createTag() {
    const name = window.prompt('请输入标签名');
    if (!name) return window.alert('标签名不能为空 ');
    this.$store.commit("createTag",name);
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/helper";

.tags {
  padding: 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  > .current {
    display: flex;
    flex-wrap: wrap;

    > li {
      color: $themeColor;
      background-color: $themeColor-light;
      padding: 2px 20px;
      border-radius: 10px;
      margin-right: 12px;
      margin-bottom: 12px;

      &.selected {
        color: white;
        background-color: $themeColor;
      }
    }
  }

  > .new {
    margin-top: 16px;

    button {
      background-color: transparent;
      border: none;
      color: $themeColor;
      border-bottom: 1px solid;
    }
  }
}

</style>
